<template>
  <div class="user-info-container">
    <div class="info-group">
      <label for="avatar_url">头像:</label>
      <span id="avatar_url"><a-image :src="userInfo.avatar_url" style="width: 10%"></a-image></span>
    </div>
<!--    <div class="input-group">-->
<!--      <label for="user_id">用户ID:</label>-->
<!--      <span id="user_name">{{ userInfo.user_id }}</span>-->
<!--    </div>-->
    <div class="info-group">
      <label for="user_name">昵称:</label>
      <a-input v-model="userInfo.user_name" :value="userInfo.user_name" id="user_name" placeholder="请输入用户名"></a-input>
    </div>
    <div class="info-group">
      <label for="user_age">年龄:</label>
      <span id="user_age">{{ userInfo.user_age }}</span>
    </div>
    <div class="info-group">
      <label for="password">密码:</label>
      <a-input v-model="userInfo.password" id="password" placeholder="请输入密码"></a-input>
    </div>
    <div class="info-group">
      <label for="email">邮箱:</label>
      <a-input v-model="userInfo.email" :value="userInfo.email"  id="email" placeholder="请输入邮箱"></a-input>
    </div>
    <div class="info-group">
      <label for="phone_number">联系电话:</label>
      <a-input v-model="userInfo.phone_number" :value="userInfo.phone_number" id="phone_number" placeholder="请输入联系电话"></a-input>
    </div>
    <div>
      <a-button @click="UpdateUserInfo">修改</a-button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {notification} from 'ant-design-vue';
import axios from "axios";

// 定义用户信息
const userInfo = ref({
  user_id: '',
  user_name: '',
  avatar_url: '',
  user_age: '',
  password: '',
  email: '',
  phone_number: ''
});

// 示例：从后端获取用户信息
const fetchUserInfo = () => {
  const token = localStorage.getItem('Token');
  const config = {
    headers: {
      'Token': token || ''
    }
  };
  axios.get('/api/v1/user', { headers: config.headers })
      .then((response) => {
        const data = response.data;
        if (data.code === 0) {
          userInfo.value = data.data;
        } else {
          console.error(data.message);
        }
      })
      .catch((error) => {
        console.error('没有得到数据:', error);
      });
};

const UpdateUserInfo = () => {
  const token = localStorage.getItem('Token');
  const config = {
    headers: {
      'Token': token || ''
    }
  };
  console.log("userInfo:",userInfo.value)
  axios.put('/api/v1/user', userInfo.value, {headers: config.headers})
      .then((response) => {
        const data = response.data;
        if (data.code === 0) {
          userInfo.value = data.data;
          notification.success({description:"修改成功"})
          console.log("更新成功");
        } else {
          console.error(data.message);
        }
      })
      .catch((error) => {
        console.error('修改失败:', error);
      });
};

// 在组件挂载时加载数据
onMounted(() => {
  fetchUserInfo();
});
</script>

<style scoped>
/* 用户信息容器样式 */
.user-info-container {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 输入组样式 */
.info-group,
.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

/* 标签样式 */
.info-group label,
.input-group label {
  width: 120px;
  font-weight: bold;
}

/* 头像显示样式 */
#avatar_url a-image {
  width: 100px; /* 调整图片大小 */
  height: 100px;
}

/* 邮箱输入框样式 */
#a-input {
  width: calc(100% - 130px); /* 自动计算宽度以适应布局 */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>